<template>
  <div class="h-p100 w-p100">
    <div class="box box-ver w-p100 h-p100">
      <div @click="$router.go(-1)"  class="header box box-ac">
        <div class="icon icon-back"></div>
        <div class="box-f1 tx-c">我的收藏</div>
      </div>
      <div ref="movieList" class="list bc-fff w-p100 box-f1 of-y-s">
        <div @click="goDetail(value)" v-lazy:background-image.container="value.poster" v-for="(value,key) in movieList" :value="value" :key="key" class="movie-item bg-img2">
          <div class="title ell">{{value.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'myCollection',
  data () {
    return {
      movieList: []
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    this.listCollection()
  },
  methods: {
    listCollection () {
      this.$http({
        method: 'post',
        url: `${this.$config.apiBase}/api/v0/movie/listCollection`,
        data: {
          _id: this.userInfo._id
        }
      }).then(res => {
        this.movieList = res.data
      })
    },
    goDetail (item) {
      this.$router.push({
        path: '/detail',
        query: {
          id: item._id
        }
      })
    }
  }
}
</script>

<style lang="scss" scopedSlots>
@import '../assets/css/config.scss';
.movie-item {
  position: relative;
  background-color:#EEE;
  width:100%;
  padding-top:50%;
  margin-top:.06rem;
  margin-bottom:.06rem;
  .title{
    position: absolute;
    bottom:0;
    background-color:rgba(0,0,0,.66);
    padding:.15rem 0;
    color:#FFF;
    width:100%;
    text-indent: .2rem;
    font-size:.3rem;
  }
}
</style>
